<!-- 
	动态组件：商品分组组件
	props: 
		data: 组件数据
		
	action:
		
 -->
<template>
    <view>
        <search-bar
            v-if="data.GoodsListgroupSearchShow == 'show'"
            :placeholderText="placeholderText"
            :actions="actions"
            @searchFn="searchFn"></search-bar>
        <view v-if="data.GoodsListgroupShowtype == 'top'" class="main-dom">
            <view class="nav-bar">
                <nav-tree-x
                    class="nav-bar-scroll"
                    v-if="classifyList"
                    :tree-data="classifyList"
                    :active-id="activeId"
                    @treeClickEvent="treeClickEvent"></nav-tree-x>
            </view>
            <view :class="data.GoodsListgroupStyle == 5 ? 'dynamic-pro-list-scroll' : 'dynamic-pro-list'">
                <!-- 横向列表 -->
                <scroll-view
                    v-if="data.GoodsListgroupStyle == 5"
                    class="pro-scroll"
                    scroll-x
                    @scrolltolower="scrolltolower"
                    lower-threshold="150">
                    <view class="style-6" v-if="datas.length > 0">
                        <view
                            class="dynamic-pro-item"
                            v-for="(item, index) in datas"
                            :key="index"
                            @click="goDetail(item)">
                            <image
                                v-if="data.GoodsListgroupShowCorner"
                                :class="{
                                    'dynamic-pro-corner-new-en': data.GoodsListgroupCornerStyle == 'new-en',
                                    'dynamic-pro-corner-new': data.GoodsListgroupCornerStyle == 'new',
                                }"
                                class="dynamic-pro-corner"
                                :src="data.GoodsListgroupCornerImg"
                                mode="aspectFill"></image>
                            <view>
                                <view class="dynamic-pro-image-box" :style="{ height: imageHeight }">
                                    <image
                                        mode="aspectFill"
                                        class="dynamic-pro-image"
                                        :style="{
                                            'border-top-left-radius': getHeight(data.GoodsListgroupRadius),
                                            'border-top-right-radius': getHeight(data.GoodsListgroupRadius),
                                        }"
                                        :src="easyGetImgUrl(item.ThumbnailUrl410)"></image>
                                    <view class="dynamic-pro-stock" v-if="data.GoodsListgroupShowStock">
                                        <text>库存：{{ item.V_StockSum }}</text>
                                    </view>
                                </view>

                                <view class="dynamic-pro-info">
                                    <text class="dynamic-pro-info-name" v-if="data.GoodsListgroupShowName">{{
                                        item.ProductName
                                    }}</text>
                                    <scroll-view scroll-x :show-scrollbar="false">
                                        <view
                                            class="taglist"
                                            v-if="item.TagsList.length > 0 && data.GoodsListgroupShowTag">
                                            <view v-for="tag in item.TagsList">{{ tag.Name }}</view>
                                        </view>
                                    </scroll-view>
                                    <view class="price-bar">
                                        <view class="price-bar-box">
                                            <text
                                                class="dynamic-pro-info-price-unit"
                                                v-if="data.GoodsListgroupShowPrice"
                                                >￥</text
                                            >
                                            <text class="dynamic-pro-info-price" v-if="data.GoodsListgroupShowPrice">{{
                                                item.SaleMinPrice == item.SaleMaxPrice
                                                    ? item.SaleMaxPrice
                                                    : `${item.SaleMinPrice}~${item.SaleMaxPrice}`
                                            }}</text>
                                            <text
                                                class="dynamic-pro-info-price-origin"
                                                v-if="
                                                    data.GoodsListgroupShowOriginalPrice &&
                                                    item.RetailMaxPrice &&
                                                    item.RetailMinPrice < item.RetailMaxPrice
                                                "
                                                >￥{{ item.RetailMaxPrice }}</text
                                            >
                                            <text
                                                class="dynamic-pro-info-price-origin"
                                                v-if="
                                                    data.GoodsListgroupShowOriginalPrice &&
                                                    item.RetailMinPrice &&
                                                    !(item.RetailMinPrice < item.RetailMaxPrice)
                                                "
                                                >￥{{ item.RetailMinPrice }}</text
                                            >
                                        </view>
                                        <text
                                            class="price-btn-buy"
                                            @click.stop="buyFn(item)"
                                            v-if="data.GoodsListgroupShowBuyBtn"
                                            >购买</text
                                        >
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="mescroll-empty" v-if="datas.length == 0 && !isLoading">
                        <image src="@/static/img/empty.png"></image>
                        <view>~ 暂无数据 ~</view>
                    </view>
                </scroll-view>
                <!-- 竖向列表 -->
                <view v-else>
                    <scroll-view scroll-y="true" @scrolltolower="scrolltolower" lower-threshold="150">
                        <view
                            :class="{
                                'style-2': data.GoodsListgroupStyle == 1,
                                'style-4': data.GoodsListgroupStyle == 3,
                                'style-5': data.GoodsListgroupStyle == 4,
                            }"
                            v-if="datas.length > 0">
                            <view
                                class="dynamic-pro-item"
                                v-for="(item, index) in datas"
                                :key="index"
                                @click="goDetail(item)">
                                <image
                                    v-if="data.GoodsListgroupShowCorner"
                                    :class="{
                                        'dynamic-pro-corner-new-en': data.GoodsListgroupCornerStyle == 'new-en',
                                        'dynamic-pro-corner-new': data.GoodsListgroupCornerStyle == 'new',
                                    }"
                                    class="dynamic-pro-corner"
                                    :src="data.GoodsListgroupCornerImg"
                                    mode="aspectFill"></image>
                                <view
                                    :class="{
                                        'style-1': data.GoodsListgroupStyle == 0,
                                        'style-3': data.GoodsListgroupStyle == 2,
                                    }">
                                    <view
                                        class="dynamic-pro-image-box"
                                        :style="{
                                            height:
                                                data.GoodsListgroupStyle == 3
                                                    ? index % 3 == 0
                                                        ? imageHeight1
                                                        : imageHeight2
                                                    : imageHeight,
                                        }">
                                        <image
                                            mode="aspectFill"
                                            class="dynamic-pro-image"
                                            :style="{
                                                'border-top-left-radius': getHeight(data.GoodsListgroupRadius),
                                                'border-top-right-radius': getHeight(data.GoodsListgroupRadius),
                                            }"
                                            :src="easyGetImgUrl(item.ThumbnailUrl410)"></image>
                                        <view class="dynamic-pro-stock" v-if="data.GoodsListgroupShowStock">
                                            <text>库存：{{ item.V_StockSum }}</text>
                                        </view>
                                    </view>

                                    <view class="dynamic-pro-info">
                                        <text class="dynamic-pro-info-name" v-if="data.GoodsListgroupShowName">{{
                                            item.ProductName
                                        }}</text>
                                        <scroll-view scroll-x :show-scrollbar="false" class="scroll">
                                            <view
                                                class="taglist"
                                                v-if="item.TagsList.length > 0 && data.GoodsListgroupShowTag">
                                                <view v-for="tag in item.TagsList">{{ tag.Name }}</view>
                                            </view>
                                        </scroll-view>

                                        <view class="price-bar">
                                            <view class="price-bar-box">
                                                <text
                                                    class="dynamic-pro-info-price-unit"
                                                    v-if="data.GoodsListgroupShowPrice"
                                                    >￥</text
                                                >
                                                <text
                                                    class="dynamic-pro-info-price"
                                                    v-if="data.GoodsListgroupShowPrice"
                                                    >{{
                                                        item.SaleMinPrice == item.SaleMaxPrice
                                                            ? item.SaleMaxPrice
                                                            : `${item.SaleMinPrice}~${item.SaleMaxPrice}`
                                                    }}</text
                                                >
                                                <!-- <text class="dynamic-pro-info-price-origin" v-if="data.GoodsListgroupShowOriginalPrice && item.RetailMaxPrice && (item.RetailMinPrice < item.RetailMaxPrice)">￥{{item.RetailMaxPrice}}</text> -->
                                                <text
                                                    class="dynamic-pro-info-price-origin"
                                                    v-if="
                                                        data.GoodsListgroupShowOriginalPrice &&
                                                        item.RetailMinPrice &&
                                                        !(item.RetailMinPrice < item.RetailMaxPrice)
                                                    "
                                                    >￥{{ item.RetailMinPrice }}</text
                                                >
                                            </view>
                                            <text
                                                class="price-btn-buy"
                                                @click.stop="buyFn(item)"
                                                v-if="data.GoodsListgroupShowBuyBtn"
                                                >购买</text
                                            >
                                        </view>
                                    </view>
                                    <view class="dynamic-pro-action-bar" v-if="false">
                                        <view class="dynamic-pro-action-unit"></view>
                                        <button class="dynamic-pro-action-btn-buy">购买</button>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="mescroll-empty" v-if="datas.length == 0 && !isLoading">
                            <image src="@/static/img/empty.png"></image>
                            <view>~ 暂无数据 ~</view>
                        </view>
                        <uni-load-more v-if="isLoading" status="loading"></uni-load-more>
                    </scroll-view>
                </view>
            </view>
        </view>
        <view v-else>
            <view class="main-dom product-main">
                <scroll-view class="product-main-nav" scroll-y="true" :style="{ height: listHeight }">
                    <nav-tree :tree-data="classifyList" :active-id="activeId" @treeClickEvent="treeClickEvent">
                    </nav-tree>
                </scroll-view>
                <view class="product-main-list">
                    <swiper class="swiper" :style="{ height: listHeight }" :current="tabIndex" v-if="datas.length > 0">
                        <swiper-item v-for="(swiperItem, swiperIndex) in tabs" :key="swiperIndex">
                            <scroll-view
                                scroll-y="true"
                                :style="{ height: listHeight }"
                                @scrolltolower="scrolltolower"
                                lower-threshold="150">
                                <view class="dynamic-pro-list">
                                    <view
                                        class="dynamic-pro-item"
                                        v-for="(item, index) in datas"
                                        :key="index"
                                        @click="goDetail(item)">
                                        <view class="style-3">
                                            <view
                                                class="dynamic-pro-image-box"
                                                :style="{
                                                    height:
                                                        data.GoodsListgroupStyle == 3
                                                            ? index % 3 == 0
                                                                ? imageHeight1
                                                                : imageHeight2
                                                            : imageHeight,
                                                }">
                                                <image
                                                    mode="aspectFill"
                                                    class="dynamic-pro-image"
                                                    :style="{
                                                        'border-top-left-radius': getHeight(data.GoodsListgroupRadius),
                                                        'border-top-right-radius': getHeight(data.GoodsListgroupRadius),
                                                    }"
                                                    :src="easyGetImgUrl(item.ThumbnailUrl410)"></image>
                                                <!-- 	<view class="dynamic-pro-stock" v-if="data.GoodsListgroupShowStock">
										<text>库存：{{item.V_StockSum}}</text>
									</view> -->
                                            </view>

                                            <view class="dynamic-pro-info">
                                                <text
                                                    class="dynamic-pro-info-name"
                                                    v-if="data.GoodsListgroupShowName"
                                                    >{{ item.ProductName }}</text
                                                >
                                                <text v-if="data.GoodsListgroupShowStock" class="desc-item">
                                                    库存：{{ item.V_StockSum }}
                                                </text>
                                                <view
                                                    class="taglist"
                                                    v-if="item.TagsList.length > 0 && data.GoodsListgroupShowTag">
                                                    <view v-for="tag in item.TagsList">{{ tag.Name }}</view>
                                                </view>

                                                <view class="price-bar">
                                                    <view class="price-bar-box">
                                                        <text
                                                            class="dynamic-pro-info-price-unit"
                                                            v-if="data.GoodsListgroupShowPrice"
                                                            >￥</text
                                                        >
                                                        <text
                                                            class="dynamic-pro-info-price"
                                                            v-if="data.GoodsListgroupShowPrice"
                                                            >{{
                                                                item.SaleMinPrice == item.SaleMaxPrice
                                                                    ? item.SaleMaxPrice
                                                                    : `${item.SaleMinPrice}~${item.SaleMaxPrice}`
                                                            }}</text
                                                        >
                                                        <!-- <text class="dynamic-pro-info-price-origin" v-if="data.GoodsListgroupShowOriginalPrice && item.RetailMaxPrice && (item.RetailMinPrice < item.RetailMaxPrice)">￥{{item.RetailMaxPrice}}</text> -->
                                                        <text
                                                            class="dynamic-pro-info-price-origin"
                                                            v-if="
                                                                data.GoodsListgroupShowOriginalPrice &&
                                                                item.RetailMinPrice &&
                                                                !(item.RetailMinPrice < item.RetailMaxPrice)
                                                            "
                                                            >￥{{ item.RetailMinPrice }}</text
                                                        >
                                                    </view>
                                                    <text
                                                        class="price-btn-buy"
                                                        @click.stop="buyFn(item)"
                                                        v-if="data.GoodsListgroupShowBuyBtn"
                                                        >购买</text
                                                    >
                                                </view>
                                            </view>
                                            <view class="dynamic-pro-action-bar" v-if="false">
                                                <view class="dynamic-pro-action-unit"></view>
                                                <button class="dynamic-pro-action-btn-buy">购买</button>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </scroll-view>
                            <uni-load-more v-if="isLoading" status="loading"></uni-load-more>
                        </swiper-item>
                    </swiper>
                    <view class="mescroll-empty" v-if="datas.length == 0 && !isLoading">
                        <image src="@/static/img/empty.png"></image>
                        <view>~ 暂无数据 ~</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { getWholeSaleListForSku, getProductTypeTree, GetProductCategoryList } from "@/service/api/product.js"
import { getElementHeight, getElementTop } from "@/uni-sub-base/utils/elementUtil.js"
import navTree from "@/components/product/nav-tree.vue"
import navTreeX from "@/components/product/nav-tree-x.vue"
import searchBar from "@/components/common/search-bar.vue"
import productSpec from "@/components/product/product-spec.vue"
import utilsOld from "@/utils/utilsOld.js"
import storage from "@/uni-sub-base/utils/storage.js"
import { changeArr } from "@/utils/productUtil.js"
import { getHeight } from "./utils/util.js"
export default {
    components: {
        productSpec,
        searchBar,
        navTreeX,
        navTree,
    },
    props: {
        data: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            activeId: -1,
            classifyList: [],
            placeholderText: "请输入商品名称",
            requestData: {
                ProductType: 1,
                OrderBy: "display_sequence",
                Sort: "desc",
            },
            actions: [],
            imageHeight1: "",
            imageHeight2: "",
            imageHeight5: "",
            imageHeight: "",
            datas: [],
            listHeight: "60vh", //list所需高度
            pageIndex: 1,
            pagesize: 20,
            isDataLoadOk: false,
            isLoading: false,
            priceDecimalPlaces: 2,
            isoneload: true,
            tabs: [
                {
                    title: "综合",
                },
            ],
            tabIndex: 0,
            loadOk: false,
        }
    },
    mounted() {
        let productDisplay = storage.getCache("productDisplay")
        if (productDisplay) {
            this.priceDecimalPlaces = productDisplay.PriceDecimalPlaces
        }
        this.getListHeight()
        //获取同宽的高度
        this.getImageHeight()
        this.getProductTypeTree()
    },
    methods: {
        getListHeight(isHome = false) {
            //获取商品高度
            getElementHeight(this, ".main-dom", (e) => {
                // this.listHeight = e + "px"
            })
        },
        //商品分类树列表
        getProductTypeTree() {
            let ids = []
            this.data.GoodsListgroupList.forEach((item) => {
                ids.push(item.Id)
            })
            if (ids.length > 0) {
                let path = "?ids=" + ids.join(",")
                GetProductCategoryList(path).then((res) => {
                    this.getNavData(res)
                })
            } else {
                this.setLoadBack()
                // this.easyToast("商品分组组件未添加分类")
            }
        },
        getNavData(res) {
            if (res) {
                this.initClassify = false
                this.classifyList = []
                if (this.data.GoodsListgroupShowAll) {
                    this.totalClassify = {
                        OrderBy: 0,
                        id: 2,
                        name: "全部分类",
                        parent_id: 0,
                        parent_path: "_0_2_",
                        type_id: null,
                        pagesize: 20,
                    }
                    this.classifyList.push(this.totalClassify)
                }
                if (res.Data && res.Data.length > 0) {
                    res.Data.forEach((item) => {
                        this.classifyList.push(item)
                    })
                }
                this.data.GoodsListgroupList.forEach((item) => {
                    this.classifyList.forEach((res) => {
                        if (item.Id == res.id) {
                            res.name = item.Name
                            res.pagesize = +item.Page
                        }
                    })
                })
                if (this.data.GoodsListgroupShowAll) {
                    this.activeId = 2
                    this.requestData.typePath = "_0_2_"
                    this.pagesize = 20
                } else {
                    this.activeId = this.classifyList[0].id
                    this.requestData.typePath = this.classifyList[0].parent_path
                    this.pagesize = this.classifyList[0].pagesize
                }
                this.getData()
            }
        },
        //加载数据
        getData() {
            let param = this.requestData
            if (this.data.GoodsListgroupLoadtype == "brand" && this.data.GoodsListgroupLoadBrand) {
                param.BrandIds = this.data.GoodsListgroupLoadBrand
            }
            if (this.data.GoodsListgroupLoadtype == "tags" && this.data.GoodsListgroupLoadTag) {
                param.TagIds = this.data.GoodsListgroupLoadTag
            }
            param.PageIndex = this.pageIndex
            param.PageSize = this.pagesize
            if (this.data.GoodsListgroupStyle == 5) {
                this.setLoadBack()
            }
            if (this.requestData.typePath) {
                param.typePath = this.requestData.typePath
            }
            this.isLoading = true
            if (this.isoneload) {
                this.isoneload = false
                getWholeSaleListForSku(param).then((res) => {
                    this.isLoading = false
                    if (res.Data && res.Data.Data) {
                        this.isoneload = true
                        this.datas = this.datas.concat(res.Data.Data)
                        if (this.data.GoodsListgroupShowAll && this.activeId == 2) {
                            if (this.datas.length >= res.Data.RecordAmout) {
                                this.isDataLoadOk = true
                                this.setLoadBack()
                            } else {
                                this.pageIndex += 1
                                this.setLoadBack()
                            }
                        } else {
                            this.isDataLoadOk = true
                            this.setLoadBack()
                        }

                        changeArr(this.datas, false, this)
                    } else {
                        this.isDataLoadOk = true
                        this.setLoadBack()
                    }
                })
                this.$nextTick(() => {})
            }
        },
        //组件加载完成
        setLoadBack() {
            this.$emit("loadBack", this.data.index)
        },
        listGetMoreData() {
            if (this.data.GoodsListgroupStyle != 5 && this.data.GoodsListgroupShowAll && this.activeId == 2) {
                this.scrolltolower()
            }
        },
        scrolltolower() {
            if (!this.isDataLoadOk && this.activeId == 2) {
                this.getData()
            }
        },
        //获取同宽的高度
        getImageHeight() {
            let that = this
            uni.getSystemInfo({
                //调用uni-app接口获取屏幕高度
                success(res) {
                    //成功回调函数
                    let w = res.screenWidth
                    //页面边距
                    let paddingW = uni.upx2px(48)

                    //item边距
                    let paddingW2 = uni.upx2px(20)
                    let paddingW5 = uni.upx2px(36)

                    that.imageHeight5 = (w - paddingW - paddingW5) / 3 + "px"
                    that.imageHeight2 = (w - paddingW - paddingW2) / 2 + "px"
                    that.imageHeight1 = w - paddingW + "px"

                    if (that.data.GoodsListgroupStyle == "0") {
                        that.imageHeight = that.imageHeight1
                    } else if (that.data.GoodsListgroupStyle == 1) {
                        that.imageHeight = that.imageHeight2
                    } else if (that.data.GoodsListgroupStyle == 4 || that.data.GoodsListgroupStyle == 5) {
                        that.imageHeight = that.imageHeight5
                    }
                },
            })
        },
        // 点击分类事件
        treeClickEvent(item) {
            if (this.activeId !== item.id) {
                this.pageIndex = 1
                this.pagesize = item.pagesize
                this.resetClass(item)
            }
        },
        resetClass(item, bool = true) {
            const that = this
            this.datas = []
            that.activeId = item.id
            that.typePath = item.parent_path
            that.requestData.typePath = item.parent_path
            this.getData()
        },
        goDetail(item) {
            if (this.getAppSet().isHideProDetail) {
                return
            }
            if (this.getSupplierMode() == 0) {
                this.easyGoTo(`/pages_shop/packet/product/productDetail?id=${item.ID}&InfoType=${item.SkuType}`)
            } else if (this.getSupplierMode() == 1) {
                this.easyGoTo(`/pages_shop/packet/product/productDetail?id=${item.ID}&InfoType=${item.SkuType}`)
            }
        },
        buyFn(item) {
            let token = storage.getCache("token")
            if (!token || token == "") {
                this.$showModal({ show: true })
                return
            }
            this.$emit("buyFn", item)
        },
        getHeight(height) {
            return getHeight(height)
        },
        searchFn(searchText) {
            //搜索
            this.requestData.search = searchText
            this.datas = []
            this.getData()
        },
    },
}
</script>

<style lang="scss" scope>
@import "@/uni-sub-base/components/dynamic/style/dynamic.scss";
.pro-scroll {
    white-space: nowrap;
    width: 100%;
}
.dynamic-pro-item {
    background: #ffffff;
    margin-bottom: 20rpx;
    position: relative;
    // overflow: hidden;
}
.dynamic-pro-corner {
    position: absolute;
    top: 10rpx;
    left: 10rpx;
    width: 72rpx;
    height: 72rpx;
    z-index: 10;
}
.dynamic-pro-corner-new {
    top: 0rpx;
    left: 0rpx;
    width: 72rpx;
    height: 52rpx;
}
.dynamic-pro-corner-new-en {
    top: 0rpx;
    left: 0rpx;
}
.dynamic-pro-list {
    padding: 24rpx 24rpx 4px;
}
.dynamic-pro-list-scroll {
    padding: 24rpx 0 4px;
}
.dynamic-pro-image-box {
    position: relative;
    width: 600rpx;
    height: 400rpx;
    flex: none;
    .dynamic-pro-image {
        width: 100%;
        height: 100%;
    }
    .dynamic-pro-stock {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 66rpx;
        background: rgba(0, 0, 0, 0.4);
        display: flex;
        justify-content: center;
        align-items: center;
        text {
            color: #ffffff;
        }
    }
}

.dynamic-pro-info {
    // padding: 12rpx;
    .dynamic-pro-info-name {
        display: flex;
        padding: 12rpx 12rpx 0;
        margin-bottom: 16rpx;
        word-break: break-all;
    }
    .del-text {
        text {
            color: #999999;
        }
    }
    .price-bar {
        display: flex;
        flex-direction: row;
        align-items: center;
        .price-bar-box {
            flex: 1;
        }
        .dynamic-pro-info-price-unit {
            display: inline-block;
            margin-left: 12rpx;
            margin-bottom: 12rpx;
            color: #ec612a;
            font-weight: bold;
            font-size: 26rpx;
        }
        .dynamic-pro-info-price {
            font-weight: bold;
            font-size: 32rpx;
            color: #ec612a;
        }
        .dynamic-pro-info-price-origin {
            padding-left: 8rpx;
            // text-decoration: line-through;
        }
        .price-btn-buy {
            margin-right: 12rpx;
            margin-bottom: 12rpx;
        }
    }
}
.product-main {
    .dynamic-pro-image-box {
        width: 120rpx !important;
        height: 120rpx !important;
    }
    .dynamic-pro-info-name {
        padding: 0 12rpx 0;
    }
    // .dynamic-pro-image{
    // 	width: 120rpx!important;
    // 	height: 120rpx!important;
    // }
}
.price-btn-buy {
    padding: 8rpx 36rpx;
    background: $app-color-main;
    color: #ffffff;
    border-radius: 80rpx;
}
.dynamic-pro-action-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .dynamic-pro-action-unit {
        flex: 1;
    }
}
.style-1 {
    .dynamic-pro-image-box {
        width: 100%;
    }
}
.style-2 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    .dynamic-pro-item {
        width: calc(50% - 10rpx);
        .dynamic-pro-image-box {
            width: 100%;
            height: 100%;
        }
        .dynamic-pro-info-name {
            height: 66rpx;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    }
}
.style-3 {
    display: flex;
    flex-direction: row;

    .dynamic-pro-image-box {
        width: 220rpx;
        height: 220rpx;
    }
    .dynamic-pro-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;
        .dynamic-pro-info-name {
            max-height: 66rpx;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    }
}
.style-4 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    .dynamic-pro-item {
        width: calc(50% - 10rpx);
        &:nth-child(3n + 1) {
            width: 100%;
        }
        .dynamic-pro-image-box {
            width: 100%;
            height: 100%;
        }
        .dynamic-pro-info-name {
            height: 66rpx;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    }
}
.style-5 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    &::after {
        content: "";
        width: calc(33% - 12rpx);
    }
    .dynamic-pro-item {
        width: calc(33% - 12rpx);
        .dynamic-pro-image-box {
            width: 100%;
            height: 100%;
        }
        .dynamic-pro-info-name {
            display: block;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            text-align: center;
            padding: 18rpx 18rpx 0;
            margin-bottom: 8rpx;
        }
        .price-bar {
            display: block;
            text-align: center;
            padding-bottom: 20rpx;
        }
        .price-bar-box {
            display: flex;
            justify-content: center;
            align-items: center;
            padding-bottom: 10rpx;
            .dynamic-pro-info-price-unit {
                margin: 0;
            }
        }
        .price-btn-buy {
            margin: 0;
            // display: block;
        }
    }
}
.style-6 {
    display: flex;
    flex-direction: row;
    .dynamic-pro-item {
        margin-left: 24rpx;
        .dynamic-pro-image-box {
            width: 200rpx;
            height: 200rpx;
        }
        .dynamic-pro-info {
            width: 200rpx;
        }
        .dynamic-pro-info-name {
            height: 66rpx;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            white-space: initial;
            padding: 18rpx 18rpx 0;
            margin-bottom: 8rpx;
        }
        .price-bar {
            display: block;
            text-align: center;
            padding-bottom: 20rpx;
        }
        .price-bar-box {
            display: flex;
            justify-content: center;
            align-items: center;
            padding-bottom: 10rpx;
            .dynamic-pro-info-price-unit {
                margin: 0;
            }
        }
        .price-btn-buy {
            margin: 0;
            // display: block;
        }
    }
}
.nav-bar {
    display: flex;
    height: 88rpx;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    background: $color-white;
    border-bottom: solid 1rpx $line;

    .nav-bar-scroll {
        display: flex;
        flex-direction: row;
        width: 100%;
    }

    .nav-bar-action {
        display: flex;
        flex-direction: row;
        align-items: center;

        .line {
            width: 1rpx;
            height: 26rpx;
            background: #ccc;
        }

        .filter-box {
            min-width: 60rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 0 28rpx;

            .filter-box-icon {
                display: flex;
            }

            .filter-box-text {
                font-size: $font-size-20;
            }
        }
    }
}
.product-main {
    display: flex;
    flex-direction: row;
    .product-main-nav {
        display: flex;
        flex: 1.3;
        flex-direction: column;
        background: $uni-bg-color-grey;
        overflow-y: auto;
    }

    .product-main-list {
        // display: flex;
        flex: 3.5;
        // justify-content: center;
        background: #fff;
    }

    .p-b-120 {
        padding-bottom: 120rpx;
    }
}
.mescroll-empty {
    box-sizing: border-box;
    width: 100%;
    padding: 50px 25px;
    text-align: center;
    image {
        width: 140px !important;
        height: 98px !important;
        margin: 0 auto;
    }

    view {
        margin-top: 10px;
        font-size: 12px;
        color: gray;
    }
}
.taglist {
    display: flex;
    padding: 0 12rpx;
    white-space: nowrap;
    width: calc(100% - 72rpx);
    view {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 8rpx;
        height: 40rpx;
        background: rgba(236, 97, 42, 0.1);
        border-radius: 6rpx;
        font-size: 22rpx;
        font-family:
            PingFangSC-Regular,
            PingFang SC;
        font-weight: 400;
        color: #ec612a;
        margin-right: 12rpx;
        margin-bottom: 12rpx;
    }
}
.product-main {
    .taglist {
        width: auto;
        flex-wrap: wrap;
    }
}
.desc-item {
    margin-bottom: 12rpx;
    color: $app-color-text-tip;
    font-size: $font-size-24;
    padding-left: 12rpx;
    &:last-child {
        margin-bottom: 0;
    }

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
}
.scroll {
    width: 100%;
}
</style>
